import React, { Component } from 'react';
import _ from 'underscore';

import Card from 'lib/components/card.jsx';

export default class NumberSetting extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = this.getState(props);
  } // constructor

  getState(props) {
    return {
      showError: false,
      segmentType: props.segmentType,
      values: props.values
    };
  } // getState

  changeSegmentType(segmentType) {
    let values = this.state.values;
    if (_.every(values, p => p === null)) {
      values = [''];
    }
    this.setState({
      showError: false,
      segmentType,
      values
    });
  } // changeSegmentType

  customValueChangeHandler(index, { target }) {
    this.setState({
      showError: false,
      values: [
        ...this.state.values.slice(0, index),
        target.value.trim(),
        ...this.state.values.slice(index + 1)
      ]
    });
  } // customValueChangeHandler

  removeValueHandler() {
    this.setState({
      showError: false,
      values: this.state.values.slice(0, this.state.values.length - 1)
    });
  } // removeValueHandler

  addSegmentHandler() {
    this.setState({
      showError: false,
      values: [
        ...this.state.values,
        ''
      ]
    });
  } // addSegmentHandler

  submitHandler() {
    if (this.state.segmentType === 2 && _.every(this.state.values, p => !isNaN(parseFloat(p)))) {
      if (this.props.onComplete) {
        this.props.onComplete({
          segmentType: 2,
          values: _.map(this.state.values, p => parseFloat(p))
        });
      }
    } else {
      if (this.state.segmentType === 0) {
        this.props.onComplete({
          segmentType: 0,
          values: [null]
        });
      } else if (this.state.segmentType === 1) {
        this.props.onComplete({
          segmentType: 1,
          values: []
        });
      } else {
        this.setState({
          showError: true
        });
      }
    }
  } // submitHandler

  componentWillReceiveProps(nextProps) {
    this.setState(this.getState(nextProps));
  } // componentWillReceiveProps

  renderBody() {
    let now = Date.now();
    return (
      <div className="body">
        {
          this.state.showError
            ? (
              <div className="tooltip-error">
                请提供格式正确的完整数值区间
              </div>
            ) : null
        }
        <ul className="radio-ul">
          <li className="radio-li">
            <input
              id={ 'number-setting-disperse-' + now }
              className="radio"
              type="radio"
              name="segment"
              checked={ this.state.segmentType === 0 }
              onChange={ this.changeSegmentType.bind(this, 0) }
              value="0" />
            <label className="radio-label" htmlFor={ 'number-setting-disperse-' + now }>
              使用离散数字（没有区间）
            </label>
          </li>
          <li className="radio-li">
            <input
              id={ 'number-setting-default-' + now }
              className="radio"
              type="radio"
              name="segment"
              checked={ this.state.segmentType === 1 }
              onChange={ this.changeSegmentType.bind(this, 1) }
              value="1" />
            <label className="radio-label" htmlFor={ 'number-setting-default-' + now }>
              使用默认区间
            </label>
          </li>
          <li className="radio-li">
            <input
              id={ 'number-setting-custom-' + now }
              className="radio"
              type="radio"
              name="segment"
              checked={ this.state.segmentType === 2 }
              onChange={ this.changeSegmentType.bind(this, 2) }
              value="2" />
            <label className="radio-label" htmlFor={ 'number-setting-custom-' + now }>
              使用自定义区间
            </label>
          </li>
        </ul>
        {
          this.state.segmentType === 2
            ? (
              <div>
                {
                  this.state.values.concat(['']).map((value, index) => {
                    if (index === 0) {
                      return (
                        <div className="between" key={ index }>
                          <div>{ `区间 ${ index + 1 }：(` }</div>
                          <div className="value">-∞</div>
                          <div>，</div>
                          <div className="value">
                            <input
                              type="text"
                              className="input-text value-input"
                              onChange={ this.customValueChangeHandler.bind(this, index) }
                              value={ value } />
                          </div>
                          <div>]</div>
                        </div>
                      );
                    } else if (index === this.state.values.length) {
                      return (
                        <div className="between" key={ index }>
                          <div>{ `区间 ${ index + 1 }：[` }</div>
                          <div className="value">
                            <input
                              type="text"
                              className="input-text disabled value-input"
                              disabled={ true }
                              value={ this.state.values[index - 1] } />
                          </div>
                          <div>，</div>
                          <div className="value">+∞</div>
                          <div>)</div>
                        </div>
                      );
                    } else {
                      return (
                        <div className="between" key={ index }>
                          <div>{ `区间 ${ index + 1 }：[` }</div>
                          <div className="value">
                            <input
                              type="text"
                              className="input-text disabled value-input"
                              disabled={ true }
                              value={ this.state.values[index - 1] } />
                          </div>
                          <div>，</div>
                          <div className="value">
                            <input
                              type="text"
                              className="input-text value-input"
                              onChange={ this.customValueChangeHandler.bind(this, index) }
                              value={ value } />
                          </div>
                          <div>)</div>
                          {
                            this.state.values.length === (index + 1)
                              ? (
                                <div className="iconfont" onClick={ this.removeValueHandler.bind(this) }>
                                  &#xe63d;
                                </div>
                              ) : null
                          }
                        </div>
                      );
                    }
                  }, this)
                }
                <div
                  className="between"
                  style={{ display: 'inline-block' }}
                  onClick={ this.addSegmentHandler.bind(this) }>
                  <a href="javascript:;">增加区间</a>
                </div>
              </div>
            ) : null
        }
      </div>
    );
  } // renderBody

  render() {
    return (
      <Card className="widget-float value-container">
        <div className="header">
          <i className="iconfont close" onClick={ this.props.onClosing }>&#xe63d;</i>
          编辑数值区间
        </div>
        {
          this.renderBody()
        }
        <div className="footer">
          <div className="float-right">
            <a href="javascript:;" style={{marginRight: 20}} onClick={ this.props.onClosing }>取消</a>
            <button
              className="btn-green"
              onClick={ this.submitHandler.bind(this) }
              disabled={ false }>
              保存
            </button>
          </div>
        </div>
      </Card>
    );
  } // render
}

NumberSetting.defaultProps = {
  onComplete: null,
  onClosing: null
}
